<!-- App.vue -->
<template>
  <div>
    <!-- 父组件访问子组件数据 -->
    <SlotTest>
      <template #cpu>i9-12900K</template>
      <template #gpu>RTX 4090</template>
      <template #memory>512G SATA</template>
      <template #display>Xiaomi</template>
      <template #keyboard>96</template>
      <template #output="props">
        <button v-if="props.show">点击我</button>
      </template>
    </SlotTest>
    <!-- 属性透传 -->
    <Attributes class="red" @click="handlerClick"></Attributes>
    <!-- 依赖注入 -->
    <InjectTest></InjectTest>
    <!-- 获取子组件的属性和方法 -->
    <GetChild>
      
    </GetChild>
  </div>
</template>

<script setup>
// 引入组件模块
import SlotTest from "./components/SlotTest.vue";
import Attributes from "./components/Attributes.vue"
import InjectTest from "./components/InjectTest.vue"
import GetChild from "./components/GetChild.vue"

// function
const handlerClick=()=>{
        console.log('触发了click事件')
    }
</script>

<style scoped>
/* 在这里可以放置组件的样式代码，但在这个例子中我们不需要 */
</style>
